<template>
  <div class="zai-zhao-zhi-wei">
    <div class="check-tag">
      <div class="tag" :class="{ active: searchKey.jobType === 'full_time' }" @click="onSearch('full_time')">全职</div>
      <div class="tag" :class="{ active: searchKey.jobType === 'internship' }" @click="onSearch('internship')">
        实习
      </div>
    </div>

    <div class="content">
      <template v-if="list.length">
        <ul>
          <li v-for="item in list" :key="item.id">
            <Item :data="item" />
          </li>
        </ul>
      </template>
      <app-empty v-else></app-empty>
    </div>
  </div>
</template>

<script lang="ts" setup>
import CompanyService from '@/api/company';
import { reactive, ref } from 'vue';
import { useRoute } from 'vue-router';
import Item from './Item.vue';

const route = useRoute();
const { id: companyId } = route.params;
const list = ref<any>([]);
const $emit = defineEmits(['totalChange']);

const searchKey = reactive({ jobType: 'full_time' });

function onSearch(key: string) {
  searchKey.jobType = key;
  init();
}

async function init() {
  try {
    const params = { ...searchKey, pageNum: 1, pageSize: 15, companyId };
    const resp = await CompanyService.getCompanyJob(params);
    $emit('totalChange', resp.data.total);
    if (resp.code === 200) {
      list.value = resp.data?.records || [];
      console.log(list,'..')
    }
  } catch (error) {
    console.log(error);
  }
}

init();
</script>

<style lang="scss" scoped>
ul,
li {
  list-style: none;
  padding: 0;
  margin: 0;
}
.zai-zhao-zhi-wei {
  width: 100%;
  padding: 20px;
  padding-top: 20px;
  background-color: #fff;
  min-height: 500px;
  margin-bottom: 28px;
  .check-tag {
    border-radius: 4px;
    line-height: 34px;
    text-align: center;
    font-size: 14px;
    font-family:
      PingFangSC-Regular,
      PingFang SC;
    font-weight: 400;
    color: #666666;
    display: flex;
    margin-bottom: 20px;
    .tag {
      width: 126px;
      height: 34px;
      border-radius: 4px;
      border: 1px solid #e5e5e5;
      cursor: pointer;
      &:first-child {
        margin-right: 8px;
      }
      &.active {
        background: #e7eeff;
        color: #1890ff;
        border: none;
      }
    }
  }

  .content {
    // padding-left: 8px;
    ul {
      display: flex;
      flex-wrap: wrap;
      margin: -8px;
      li {
        margin: 8px;
      }
    }
  }
}
</style>
